//1.弹出框
class Popup {
	constructor(box) {
		this.oBox = box;
		this.oCloseBtn = null;
		this.eventBind();
	}
	//设置box位置
	setPosition() {
		this.oBox.style.display = "block";
		this.oBox.style.left = innerWidth / 2 - this.oBox.offsetWidth / 2 + "px";
		this.oBox.style.top = innerHeight / 2 - this.oBox.offsetHeight / 2 + "px";

	}
	//添加关闭按钮
	createCloseBtn() {
		if (this.oCloseBtn == null) {
			this.oCloseBtn = document.createElement("button");
			this.oCloseBtn.innerHTML = "X";
			this.oCloseBtn.style.width = "50px";
			this.oCloseBtn.style.height = "25px";
			this.oCloseBtn.style.position = "absolute";
			this.oBox.appendChild(this.oCloseBtn);
			this.oCloseBtn.style.left = this.oBox.offsetWidth - this.oCloseBtn.offsetWidth + "px";
		}
	}
	//点击关闭按钮关闭box
	closeBox() {
		let that = this;
		this.oCloseBtn.onclick = function() {
			that.oBox.style.display = "none";
		}
	}
	//事件绑定
	eventBind() {
		this.setPosition();
		this.createCloseBtn();
		this.closeBox();
	}
}


//2.放大镜
class Magnifier {
	constructor(smallBox, mask, bigBox, lis) {
		this.oSmallBox = smallBox;
		this.oMask = mask;
		this.oBigBox = bigBox;
		this.oLis = lis;
		this.eventBind();
	}
	mouseover() {
		let that = this;
		this.oSmallBox.onmouseover = function() {
			that.oMask.style.display = "block";
			that.oBigBox.style.display = "block";
		}
	}
	mousemove() {
		let that = this;
		this.oSmallBox.onmousemove = function(evt) {
			let e = event || evt;
			let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
			let top = e.pageY - this.offsetHeight - that.oMask.offsetHeight / 2;
			if (left < 0) {
				left = 0;
			}
			let maxLeft = this.offsetWidth - that.oMask.offsetWidth;
			if (left > maxLeft) {
				left = maxLeft;
			}
			if (top < 0) {
				top = 0;
			}
			let maxTop = this.offsetHeight - that.oMask.offsetHeight;
			if (top > maxTop) {
				top = maxTop;
			}
			that.oMask.style.left = left + "px";
			that.oMask.style.top = top + "px";

			let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
			let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;
			that.oBigBox.style.backgroundPositionX = -x + "px";
			that.oBigBox.style.backgroundPositionY = -y + "px";
		}
	}
	mouseout() {
		let that = this;
		this.oSmallBox.onmouseout = function() {
			that.oMask.style.display = "none";
			that.oBigBox.style.display = "none";
		}
	}
	clickLi() {
		let that = this;
		for (let i = 0; i < this.oLis.length; i++) {
			this.oLis[i].onclick = function() {
				that.oSmallBox.style.backgroundImage = `url(img/${i}.jpg)`;
				that.oBigBox.style.backgroundImage = `url(img/${i}.jpg)`;
			}
		}
	}
	eventBind() {
		this.mouseover();
		this.mouseout();
		this.mousemove();
		this.clickLi();
	}
}


//3.Ajax
class MyAjax {
	constructor(json) {
		this.oJson = json;
		this.ajax();
	}
	ajax() {
		//1.建立XML对象
		let xhr;
		if (window.ActiveXObject) {
			//ie
			xhr = new ActiveXObject("Microsoft.XMLHttp");
		} else {
			//非ie
			xhr = new XMLHttpRequest();
		}
		this.oJson.type = this.oJson.type.toLowerCase();
		if (this.oJson.type == "get") {
			if (this.oJson.data != "") {
				this.oJson.url += "?" + this.oJson.data;
			}
			xhr.open(this.oJson.type, this.oJson.url, this.oJson.isAsyn);
			xhr.send();
		} else if (this.oJson.type == "post") {
			xhr.open(this.oJson.type, this.oJson.url, this.oJson.isAsyn);
			xhr.send(this.oJson.data);
		} else {
			console.log("输入有误");
		}
		//4.等待
		let that = this;
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				that.oJson.callBack(xhr.responseText);
			}
		}
	}
}


//4.选择器
class Select{
	static $(str){
		if(str.charAt(0)=="#"){
			return document.getElementById(str.slice(1,str.length));
		}else if(str.charAt(0)=="."){
			return document.getElementsByClassName(str.slice(1,str.length))[0];
		}else{
			return document.getElementsByTagName(str)[0];
		}
	}
}